<template>
  <div>
    <h1>VUE Router</h1>
    <p>路由传参：是为了解决页面之间的参数不便于传递的问题</p>
    <p>以?为分隔，前面的叫params，后面的叫query</p>
    <p>?前的参数：{{$route.params.sku}}</p>
    <p>?前的参数：{{$route.params.id}}</p>
    <p>?后的参数：{{$route.query.name}}</p>
    <h2>动态路由：大量重复页面，结构相似，数据不同。典型代表：前面那一页是列表页，当前这一页是详情页</h2>
    <p>动态路由的特点：修改url时，渲染的是同一个组件，为了提升效率，会复用原来的组件，因此钩子函数不会重新执行。</p>
    <router-link :to="url" tag="div" replace>mint UI</router-link>
    <p @click="navToError">点击跳转到error</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: '/mint?name=jack&age=18'
    }
  },
  // 为了监听动态路由的变化，方法1是通过watch监听路由
  // watch: {
  //   '$route'(to, from) {
  //     console.log(to,from);
  //     console.log(`我将会获取${this.$route.params.sku}对应的数据`)
  //   }
  // },
  // 为了监听动态路由的变化，方法2是通过路由的钩子函数监听变化
  beforeRouteUpdate(to, from, next){
    console.log(111,to,from,next);
    next()
  },
  created() {
    console.log(this.$route.params.sku)
    console.log(`我将会获取${this.$route.params.sku}对应的数据`)
  },
  methods: {
    navToError() {
      // ...
      this.$router.push('/error?time=1911')
    }
  }
}
</script>

<style scoped>

</style>
